<!doctype html>
<!--
@license
Copyright 2020 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
<head>
  <title>MWC List Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
  <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" as="style" type="text/css">
  <link rel="preload" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" as="style" type="text/css">
  <script type="module" src="index.js"></script>
  <script nomodule src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <style>
    .unresolved main {
      opacity: 0;
    }
  </style>
  <link href="../shared/shared.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
  <style>
    mwc-list {
      border: 1px solid lightgray;
      max-width: 400px;
      margin-bottom: 8px;
    }

    .inverted {
      color: white;
      background-color: gray;
    }
  </style>
</head>
<body class="unresolved">
  <demo-header component="List" package="list"></demo-header>

  <main>
    <h1>Basic</h1>

    <mwc-list id="basic">
      <mwc-list-item selected>Item 0</mwc-list-item>
      <mwc-list-item>Item 1</mwc-list-item>
      <mwc-list-item>Item 2</mwc-list-item>
      <mwc-list-item>Item 3</mwc-list-item>
    </mwc-list>

    <div>Selected index: <span id="basicIndex"></span></div>

    <h1>Multi</h1>

    <mwc-list multi id="multi">
      <mwc-list-item selected>Item 0</mwc-list-item>
      <mwc-list-item>Item 1</mwc-list-item>
      <mwc-list-item selected>Item 2</mwc-list-item>
      <mwc-list-item>Item 3</mwc-list-item>
    </mwc-list>

    <div>Selected index (Set&lt;number&gt;): <span id="multiIndex"></span></div>

    <h1>Activatable</h1>

    <mwc-list activatable id="activatable">
      <mwc-list-item>Item 0</mwc-list-item>
      <mwc-list-item selected activated>Item 1</mwc-list-item>
      <mwc-list-item>Item 2</mwc-list-item>
      <mwc-list-item>Item 3</mwc-list-item>
    </mwc-list>

    <div>Selected index: <span id="activatableIndex"></span></div>

    <h1>Non-interactive</h1>

    <mwc-list noninteractive>
      <mwc-list-item>Item 0</mwc-list-item>
      <mwc-list-item>Item 1</mwc-list-item>
      <mwc-list-item>Item 2</mwc-list-item>
      <mwc-list-item>Item 3</mwc-list-item>
    </mwc-list>

    <h1>Checklist</h1>

    <mwc-list multi id="checklist">
      <mwc-check-list-item selected>Item 0</mwc-check-list-item>
      <mwc-check-list-item>Item 1</mwc-check-list-item>
      <mwc-check-list-item left selected>Item 2 (left)</mwc-check-list-item>
      <mwc-check-list-item left>Item 3 (left)</mwc-check-list-item>
      <mwc-check-list-item disabled><span>disabled</span></mwc-check-list-item>
    </mwc-list>

    <div>Selected index (Set&lt;number&gt;): <span id="checklistIndex"></span></div>

    <h1>Radio list</h1>

    <mwc-list id="radio">
      <mwc-radio-list-item group="a" selected>Item 0</mwc-radio-list-item>
      <mwc-radio-list-item group="a">Item 1</mwc-radio-list-item>
      <mwc-radio-list-item left group="a">Item 2 (left)</mwc-radio-list-item>
      <mwc-radio-list-item left group="a">Item 3 (left)</mwc-radio-list-item>
    </mwc-list>

    <div>Selected index: <span id="radioIndex"></span></div>

    <h1>Multi Radio list (with divider)</h1>

    <mwc-list multi id="multiRadio">
      <mwc-radio-list-item group="b">Item 0</mwc-radio-list-item>
      <mwc-radio-list-item group="b" selected>Item 1</mwc-radio-list-item>
      <li divider role="separator"></li>
      <mwc-radio-list-item group="c" selected>Item 2</mwc-radio-list-item>
      <mwc-radio-list-item group="c">Item 3</mwc-radio-list-item>
    </mwc-list>

    <div>Selected index (Set&lt;number&gt;): <span id="multiRadioIndex"></span></div>

    <h1>Two-line (padded dividers)</h1>

    <mwc-list multi>
      <mwc-list-item twoline>
        <span>Item 0</span>
        <span slot="secondary">Secondary line</span>
      </mwc-list-item>
      <li divider padded role="separator"></li>
      <mwc-list-item twoline>
        <span>Item 1</span>
        <span slot="secondary">Secondary line</span>
      </mwc-list-item>
      <li divider padded role="separator"></li>
      <mwc-list-item twoline>
        <span>Item 2</span>
        <span slot="secondary">Secondary line</span>
      </mwc-list-item>
      <li divider padded role="separator"></li>
      <mwc-list-item twoline>
        <span>Item 3</span>
        <span slot="secondary">Secondary line</span>
      </mwc-list-item>
    </mwc-list>

    <h1>Graphics (inset dividers)</h1>

    <mwc-list id="graphics" multi>
      <mwc-list-item twoline graphic="avatar" noninteractive hasMeta>
        <span>Non-interactive two line avatar graphic</span>
        <span slot="secondary">email@domain.tld</span>
        <span slot="graphic" class="material-icons inverted">folder</span>
        <span slot="meta" class="material-icons">info</span>
      </mwc-list-item>
      <li divider role="separator"></li>
      <mwc-list-item graphic="icon" hasMeta>
        <span>Icon graphic</span>
        <span slot="graphic" class="material-icons inverted">folder</span>
        <span slot="meta" class="material-icons">info</span>
      </mwc-list-item>
      <li divider inset role="separator"></li>
      <mwc-list-item graphic="medium" hasMeta>
        <span>medium graphic</span>
        <span slot="graphic" class="material-icons inverted">folder</span>
        <span slot="meta" class="material-icons">info</span>
      </mwc-list-item>
      <li divider inset role="separator"></li>
      <mwc-list-item graphic="large" hasMeta>
        <span>large graphic</span>
        <span slot="graphic" class="material-icons inverted">folder</span>
        <span slot="meta" class="material-icons">info</span>
      </mwc-list-item>
    </mwc-list>

    <div>Selected index (Set&lt;number&gt;): <span id="graphicsIndex"></span></div>

    <h1>Styled</h1>

    <style>
      #styled {
        --mdc-theme-primary: red;
        --mdc-list-vertical-padding: 0px;
        --mdc-list-side-padding: 0px;
      }
    </style>

    <mwc-list activatable id="styled">
      <mwc-list-item selected>Item 0</mwc-list-item>
      <mwc-list-item>Item 1</mwc-list-item>
      <mwc-list-item>Item 2</mwc-list-item>
      <mwc-list-item>Item 3</mwc-list-item>
    </mwc-list>

    <h1>Styled (Ripple Disabled)</h1>

    <style>
      /* disable ripple */
      #styledr {
        --mdc-ripple-color: transparent;
      }

      #styledr > * {
        transition: background-color .2s, color .2s;
      }

      #styledr [selected] {
        background-color: rgb(33, 33, 33);
        color: white;
      }

      #styledr [mwc-list-item]:not([selected]):hover,
      #styledr [mwc-list-item]:not([selected]):focus {
        background-color: rgba(33, 33, 33, 0.3);
      }

      #styledr [mwc-list-item]:not([selected]):active {
        background-color: rgba(33, 33, 33, 0.4);
      }

      #styledr [mwc-list-item][selected]:hover,
      #styledr [mwc-list-item][selected]:focus {
        background-color: rgba(33, 33, 33, 0.9);
      }

      #styledr [mwc-list-item][selected]:active {
        background-color: rgba(33, 33, 33, 0.8);
      }
    </style>

    <mwc-list id="styledr">
      <mwc-list-item selected>Item 0</mwc-list-item>
      <mwc-list-item>Item 1</mwc-list-item>
      <mwc-list-item>Item 2</mwc-list-item>
      <mwc-list-item>Item 3</mwc-list-item>
    </mwc-list>
  </main>
  <script nomodule src="index.es5.js"></script>
</body>
</html>
